<template>
    <div class="content-box">
      <div ref="searchBox" class="search-box flex" v-show="showSearch">
        <el-form
          :model="queryParams"
          ref="queryForm"
          :inline="true"
          label-width="100px"
        >
         <el-form-item label="产品名称"  prop="productName">
           <el-input
             v-model="queryParams.productName"
             placeholder="请输入"
             style="width: 240px; margin-right: 20px"
             clearable
           ></el-input>
         </el-form-item>
          <el-form-item label="关联公司" prop="companyIds">
            <el-select
              v-model="queryParams.companyIds"
              multiple
              collapse-tags
              clearable
              filterable
              placeholder="请选择"
              style="width: 240px; margin-right: 20px"
            >
              <el-option
                v-for="(item, index) in upCompanyList"
                :key="index"
                :label="item.companyName"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="渠道产品" prop="productIds">
            <el-select
              v-model="queryParams.productIds"
              multiple
              collapse-tags
              clearable
              filterable
              placeholder="请选择"
              style="width: 240px; margin-right: 20px"
            >
              <el-option
                v-for="(item, index) in upChannelList"
                :key="index"
                :label="item.productName"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="管理人" prop="manageUserIds">
            <el-select
              v-model="queryParams.manageUserIds"
              multiple
              collapse-tags
              clearable
              filterable
              placeholder="请选择管理人"
              style="width: 240px; margin-right: 20px"
            >
              <el-option
                v-for="(item, index) in manageOptionList"
                :key="index"
                :label="item.userName"
                :value="item.userId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="在线状态" prop="status">
            <el-select
              v-model="queryParams.status"
              clearable
              filterable
              placeholder="请选择"
              style="width: 240px; margin-right: 20px"
            >
              <el-option
                v-for="(item, index) in statusOption"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="查询时间" prop="dateRange">
            <el-date-picker
              :style="{width: device === 'mobile'? '280px' :'355px', marginRight: '20px'}"
              clearable
              v-model="dateRange"
              type="datetimerange"
              range-separator="至"
              value-format="yyyy-MM-dd HH:mm:ss"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="handleQuery"
              plain
              >查询</el-button
            >
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
              >重置</el-button
            >
            <el-button
              type="primary"
              size="mini"
              v-hasPermi="['business:upPickManagement:add']"
              @click="handelDialog('添加', null)"
              >添加采量</el-button
            >
          </el-form-item>
        </el-form>
      </div>
  
      <div class="table-box">
        <el-row :gutter="10" class="mb8">
          <right-toolbar
            :showSearch.sync="showSearch"
            @queryTable="handleQuery"
            :columns="columnsList"
          ></right-toolbar>
        </el-row>
        <el-table
          v-sticky-header
          ref="table"
          v-loading="loading"
          :data="dataList"
        >
          <template v-for="(item,index) in columns.slice(0, columns.length - 1)">
            <el-table-column
              :key="index"
              :label="item.label"
              :prop="item.prop"
              :width="getColumnWidth(index)"
              align="center"
              :fixed="item.fixed"
              :sortable="item.sortable ? item.sortable : false"
              :show-overflow-tooltip="item.showTooltip"
              v-if="item.visible"
            >
              <template slot-scope="scope">
              <!-- 跳转模式单独处理  -->
              <div v-if="item.prop == 'jumpType'">
                <el-popconfirm
                  :title="`确定重新${
                    !scope.row[item.prop] ? '开启' : '关闭'
                  }吗？`"
                  @confirm="changeJumpType(scope.row)"
                >
                  <el-button
                    slot="reference"
                    :type="scope.row[item.prop] ? 'success' : 'info'"
                    size="mini"
                    :style="{
                      color:'#fff',
                      backgroundColor: scope.row[item.prop]?'#81663B':'#5AA4AE',
                      borderColor: scope.row[item.prop]?'#81663B':'#5AA4AE',
                    }"
                    >{{ scope.row[item.prop] ? "开启" : "关闭" }}</el-button
                  >
                </el-popconfirm>
              </div>
              <!-- 自撞模式单独处理  -->
              <div v-else-if="item.prop == 'isCheck'">
                <el-popconfirm
                  :title="`确定重新${
                    !scope.row[item.prop] ? '开启' : '关闭'
                  }吗？`"
                  @confirm="changeIsCheck(scope.row)"
                  v-if="![2].includes(scope.row['pickType'])"
                >
                  <el-button
                    slot="reference"
                    :type="scope.row[item.prop] ? 'success' : 'info'"
                    size="mini"
                    :style="{
                      color:'#fff',
                      backgroundColor: scope.row[item.prop]?'#D6C560':'#757CBB',
                      borderColor: scope.row[item.prop]?'#D6C560':'#757CBB',
                    }"
                    >{{ scope.row[item.prop] ? "开启" : "关闭" }}</el-button
                  >
                </el-popconfirm>
              </div>
              <!-- 屏蔽城市单独处理  -->
              <div v-else-if="item.prop == 'isShield'">
                <el-popconfirm
                  :title="`确定变更为${
                    !scope.row[item.prop] ? '贷超' : '常规'
                  }吗？`"
                  @confirm="changeIsShield(scope.row)"
                >
                  <el-button
                    slot="reference"
                    :type="scope.row[item.prop] ? 'success' : 'info'"
                    size="mini"
                    :style="{
                      color:'#fff',
                      backgroundColor: scope.row[item.prop]?'#EF845D':'#bb5100',
                      borderColor: scope.row[item.prop]?'#EF845D':'#bb5100'
                    }"
                    >{{ scope.row[item.prop] ? "贷超" : "常规" }}</el-button
                  >
                </el-popconfirm>
              </div>
              <!-- 企微跳转单独处理  -->
              <div v-else-if="item.prop == 'isWeChat'">
                <el-popconfirm
                  :title="`确定重新${
                    !scope.row[item.prop] ? '开启' : '关闭'
                  }吗？`"
                  @confirm="changeIsWeChat(scope.row)"
                  v-if="scope.row[item.prop] != null"
                >
                  <el-button
                    slot="reference"
                    :type="scope.row[item.prop] ? 'success' : 'info'"
                    size="mini"
                    :style="{
                      color:'#fff',
                      backgroundColor: scope.row[item.prop]?'#BA79B1':'#DA9E8C',
                      borderColor: scope.row[item.prop]?'#BA79B1':'#DA9E8C'
                    }"
                    >{{ scope.row[item.prop] ? "开启" : "关闭" }}</el-button
                  >
                </el-popconfirm>
              </div>
              <!-- 贷超跳转单独处理  -->
              <div v-else-if="item.prop == 'isAdvert'">
                <el-popconfirm
                  :title="`确定重新${
                    !scope.row[item.prop] ? '开启' : '关闭'
                  }吗？`"
                  @confirm="changeIsAdvert(scope.row)"
                  v-if="scope.row[item.prop] != null"
                >
                  <el-button
                    slot="reference"
                    :type="scope.row[item.prop] ? 'success' : 'info'"
                    size="mini"
                    :style="{
                      color:'#fff',
                      backgroundColor: scope.row[item.prop]?'#822327':'#bdb2b2',
                      borderColor: scope.row[item.prop]?'#822327':'#bdb2b2'
                    }"
                    >{{ scope.row[item.prop] ? "开启" : "关闭" }}</el-button
                  >
                </el-popconfirm>
              </div>
               <!--上下线状态单独处理 -->
              <div v-else-if="item.prop === 'status'" @click="showOrOffPopo(scope.row)">
                <el-popover
                  placement="top"
                  trigger="click"
                  :value ="rowIndex === scope.row.id"
                  title="上下线状态操作"
                  >
                  <el-form >
                    <el-form-item style="margin-bottom: 0;">
                      <el-radio-group v-removeAriaHidden v-model="upAndDownLinesStates" >
                        <el-radio 
                         v-for="(item,index) in statusOption" 
                        :key="index" :label="item.value">{{ item.label }}
                      </el-radio>
                     </el-radio-group>
                    </el-form-item>
                    <el-form-item style="display: flex;justify-content: center;margin-bottom: 8px;">
                      <el-button type="primary" @click="clickSubmitOnOrOff(scope.row)">提交</el-button>
                      <el-button @click="clickCancelOnOrOff(scope.row)">取消</el-button>
                    </el-form-item>
                  </el-form>
                  <el-button 
                     slot="reference"
                     :type="statusColor(scope.row[item.prop])" 
                     size="mini" 
                   >{{ ArrayFormatObj(statusOption)[scope.row[item.prop]]}}</el-button>
                </el-popover> 
              </div>
             
              <!-- 配置链接复制处理 -->
              <div v-else-if="item.prop === 'pickUrl'" 
                style="cursor: pointer;"
                v-clipboard:copy="scope.row[item.prop]" v-clipboard:success="clipboardSuccess">
                 {{  scope.row[item.prop] }}
              </div>
              <span v-else>
                {{  scope.row[item.prop] }}
              </span>
              </template>
            </el-table-column>
          </template>
          <el-table-column
            fixed="right"
            :prop="columns[columns.length - 1].prop"
            :label="columns[columns.length - 1].label"
            align="center"
            :width="getColumnWidth(columns.length - 1)"
            v-if="columns[columns.length - 1].visible"
          >
            <template slot-scope="scope">
              <div class="flex-center flex">
                <!-- <el-button
                  type="text"
                  v-hasPermi="['business:upPickManagement:query']"
                  @click="handelDialog('查看', scope.row)"
                  >查看</el-button
                 > -->
                <el-button
                  type="text"
                  v-hasPermi="['business:upPickManagement:edit']"
                  @click="handelDialog('编辑', scope.row)"
                  >编辑</el-button
                >
                <el-popconfirm
                  title="确定要删除该采量吗？"
                  style="margin-left: 10px"
                  @cancel="hanCancelDel"
                  @confirm="handelDel(scope.row)"
                >
                  <el-button
                    slot="reference"
                    type="text"
                    v-hasPermi="['business:upPickManagement:remove']"
                    ><span style="color: #ff116e">删除</span></el-button
                  >
                </el-popconfirm>
                <el-button
                  type="text"
                  style="color: #37b24d;"
                  v-hasPermi="['business:upPickManagement:pickCity']"
                  v-if="![0,1].includes(scope.row.pickType)"
                  @click="handelDialog('省市评分', scope.row)"
                  >省市评分</el-button
                >
                <el-button
                  type="text"
                  style="color: #f08c00;"
                  v-hasPermi="['business:upPickManagement:pickFlair']"
                  v-if="![0,1].includes(scope.row.pickType)"
                  @click="handelDialog('资质评分', scope.row)"
                  >资质评分</el-button
                >
                <div @click="showPassRatio(scope.row)">
                    <el-popover
                      placement="left"
                      trigger="click"
                      :value ="passRatioIndex === scope.row.id"
                      title="最低通过率设置"
                      v-if="[0,1].includes(scope.row.pickType)"
                      >
                      <el-form >
                        <el-form-item >
                          <el-input-number 
                            v-model="passRatio" 
                            controls-position="right" 
                            placeholder="请输入最低通过率"
                            :min="0" 
                            :max="100"
                            style="width: 100%;"
                          >
                          </el-input-number>
                        </el-form-item>
                        <el-form-item style="display: flex;justify-content: center;margin-bottom: 8px;">
                          <el-button type="primary" @click="clickPassRatio(scope.row)">提交</el-button>
                          <el-button @click="clickCancelPassRatio(scope.row)">取消</el-button>
                        </el-form-item>
                      </el-form>
                      <el-button
                       slot="reference"
                       type="text"
                       style="color: #006d75;"
                       >最低通过率设置</el-button>
                    </el-popover> 
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <!-- 使用分页插件 -->
        <pagination
          v-show="total > 0"
          :total="total"
          :page-sizes="[10, 50, 100, 200, 500]"
          :page.sync="queryParams.pageIndex"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
      <!-- 新增/编辑/查看 对话框 -->
      <el-dialog
        :title="title"
        width="800px"
        :visible.sync="dialogShow"
        :before-close="handleClose"
      >
        <el-form :model="form" :rules="rules" label-width="140px" ref="formRef">
          <el-form-item label="关联公司" prop="companyId">
             <el-select
               v-if="!form.id"
               v-model="form.companyId"
               clearable
               filterable
               placeholder="请选择"
               style="width: 100%"
               @change="getProductId"
             >
               <el-option
                 v-for="(item, index) in upCompanyList"
                 :key="index"
                 :label="item.companyName"
                 :value="item.id"
               ></el-option>
             </el-select>
             <el-input
              v-else
              v-model="form.companyName"
              style="width: 100%"
              placeholder="请输入关联公司"
              clearable
              :disabled="!!form.id"
            />
          </el-form-item>
          <el-form-item label="产品名称" prop="productName">
            <el-input
              v-model="form.productName"
              style="width: 100%"
              placeholder="请输入产品名称"
              clearable
              :disabled="viewsOptionState"
            />
          </el-form-item>
          <el-form-item label="产品简称" prop="simpleName">
            <el-input
              v-model="form.simpleName"
              style="width: 100%"
              placeholder="请输入产品简称"
              clearable
              :disabled="viewsOptionState"
            />
          </el-form-item>
          <el-form-item label="采量模式" prop="pickType">
            <el-select
              v-model="form.pickType"
              clearable
              filterable
              placeholder="请选择"
              style="width: 100%"
              :disabled="viewsOptionState"
              @change="pickTypeChange"
            >
              <el-option
                v-for="(item, index) in pickTypeOption"
                :key="index"
                :label="item.value"
                :value="item.key"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item 
            label="分发渠道" 
            prop="productId"
          >
            <el-select
              v-model="form.productId"
              clearable
              filterable
              placeholder="请选择"
              style="width: 100%"
              :disabled="viewsOptionState"
            >
              <el-option
                v-for="(item, index) in productIdOption"
                :key="index"
                :label="item.productName"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item 
           v-if="[0,1].includes(form.pickType)"
           label="联登模式" prop="pickMode">
            <el-select
              v-model="form.pickMode"
              clearable
              filterable
              placeholder="请选择"
              style="width: 100%"
              :disabled="viewsOptionState"
            >
              <el-option
                v-for="(item, index) in pickModeOption"
                :key="index"
                :label="item.value"
                :value="item.key"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="每日限量" prop="orderNum">
              <el-input-number 
                v-model="form.orderNum" 
                controls-position="right" 
                placeholder="请输入"
                :min="0" 
                style="width: 100%;"
                :disabled="viewsOptionState"
              >
              </el-input-number>
          </el-form-item>
          <el-form-item label="计费模式" prop="feeType">
            <el-select
              v-model="form.feeType"
              clearable
              filterable
              placeholder="请选择"
              style="width: 100%"
              :disabled="viewsOptionState"
            >
              <el-option
                v-for="(item, index) in feeTypeOption"
                :key="index"
                :label="item.value"
                :value="item.key"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="单价" prop="priceMoney">
              <el-input-number 
                v-model="form.priceMoney" 
                controls-position="right" 
                placeholder="请输入"
                :min="0" 
                style="width: 100%;"
                :disabled="viewsOptionState"
              >
              </el-input-number>
          </el-form-item>

          <el-form-item label="采量时间类型" prop="isZone">
            <el-select
              v-model="form.isZone"
              clearable
              filterable
              placeholder="请选择"
              style="width: 100%"
              :disabled="viewsOptionState"
            >
              <el-option
                v-for="(item, index) in isZoneOption"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="采量时间范围" prop="pickDateRange">
            <el-time-picker
               format="HH:mm"
               style="width: 50%"
               v-model="form.startTime"
               placeholder="请选择开始时间"
               :disabled="viewsOptionState"
            >
            </el-time-picker>
            <el-time-picker
               format="HH:mm"
               style="width: 50%"
               v-model="form.endTime"
               placeholder="请选择结束时间"
               :disabled="viewsOptionState"
            >
            </el-time-picker>
          </el-form-item>
          <el-form-item label="跳转模式" prop="jumpType">
            <el-select
              v-model="form.jumpType"
              clearable
              filterable
              placeholder="请选择"
              style="width: 100%"
              :disabled="viewsOptionState"
            >
              <el-option
                v-for="(item, index) in jumpTypeOption"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item 
          label="自撞模式" prop="isCheck"
          v-if="![2].includes(form.pickType)"
          >
            <el-select
              v-model="form.isCheck"
              clearable
              filterable
              placeholder="请选择"
              style="width: 100%"
              :disabled="viewsOptionState"
            >
              <el-option
                v-for="(item, index) in isCheckOption"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="在线状态" prop="status">
            <el-select
              v-model="form.status"
              clearable
              filterable
              placeholder="请选择"
              style="width: 100%"
              :disabled="viewsOptionState"
            >
              <el-option
                v-for="(item, index) in statusOption"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item 
          label="关联链接配置" prop="pickConfigId"
          >
            <el-select
              v-model="form.pickConfigId"
              clearable
              filterable
              placeholder="请选择"
              style="width: 100%"
              :disabled="viewsOptionState"
              @change="changepickConfigId"
            >
              <el-option
                v-for="(item, index) in pickConfigIdOption"
                :key="index"
                :label="item.configName"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item 
          label="配置链接" prop="pickUrl"
          >
             <el-input
               v-model="form.pickUrl"
               style="width: 100%"
               placeholder="请输入配置链接"
               clearable
               disabled
             />
          </el-form-item>
          <el-form-item 
            label="撞库链接" 
            prop="checkUrl"
            v-if="[1].includes(form.pickType)"
          >
             <el-input
               v-model="form.checkUrl"
               style="width: 100%"
               placeholder="请输入撞库链接"
               clearable
               disabled
             />
          </el-form-item>
          <el-form-item 
             label="联登链接" 
             prop="jointUrl"
             v-if="[0,1].includes(form.pickType)"
          >
             <el-input
               v-model="form.jointUrl"
               style="width: 100%"
               placeholder="请输入联登链接"
               clearable
               disabled
             />
          </el-form-item>
          <el-form-item 
            label="AesKey" 
            prop="outAesKey"
            v-if="[0,1].includes(form.pickType)"
          >
             <el-input
               v-model="form.outAesKey"
               style="width: 100%"
               placeholder="请输入"
               clearable
               disabled
             />
          </el-form-item>
          <el-form-item 
            label="AesIv" 
            prop="outAesIv"
            v-if="[0,1].includes(form.pickType)"
          >
             <el-input
               v-model="form.outAesIv"
               style="width: 100%"
               placeholder="请输入"
               clearable
               disabled
             />
          </el-form-item>
          <el-form-item 
            label="外部私钥" 
            prop="outPrivateKey"
            v-if="[0,1].includes(form.pickType)"
          >
             <el-input
               v-model="form.outPrivateKey"
               style="width: 100%"
               placeholder="请输入"
               clearable
               disabled
             />
          </el-form-item>
          <el-form-item 
            label="外部公钥" 
            prop="outPublicKey"
            v-if="[0,1].includes(form.pickType)"
          >
             <el-input
               v-model="form.outPublicKey"
               style="width: 100%"
               placeholder="请输入"
               clearable
               disabled
             />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" v-if="!viewsOptionState">
          <el-button type="primary" @click="handleSubmit('formRef')"
            >确 定</el-button
          >
          <el-button @click="handleClose">取 消</el-button>
        </div>
      </el-dialog>
    </div>
  </template>
  
  <script>
  import tableStickyMixins from "@/mixins/tableStickyMixins";
  import { mapGetters } from "vuex";
  import { getUpCompanyList } from "@/api/business/upCompanyManagement";
  import { getUpChannelList } from "@/api/business/channelManagement";
  import { querySysUserManageList } from "@/api/system/userManage";
  import{
    addOrEdit,
    deleteById,
    getFeeType,
    getPickType,
    onOrOff,
    queryById,
    queryPickByPage,
    queryProductList,
    getPickUrlById,
    getPickMode,
    getProductByCompanyId,
    updatePassRatio,
    updateJumpType,
    updateIsCheck,
    updateCityToShield,
    updateToAdvert,
    updateToWeChat
  } from "@/api/business/upPickManagement"
  import { queryUpPickUrlConfigList } from "@/api/globalConfig/upPickUrl";
  import moment from "moment";

  export default {
    // 定义名字用于标识该组件是否被keep-alive缓存
    name: "UpPickManagement",
    data() {
      return {
        // 采量管理列表
        dataList: [],
        // 总条数
        total: 0,
        // 查询参数
        queryParams: {
          pageIndex: 1,
          pageSize: 10,
        },
        // 时间范围
        dateRange: [],
        // 采量时间范围
        pickDateRange:null,
        loading: false,
        // 显示搜索栏
        showSearch: true,
        // 弹框标题
        title: "",
        // 弹框显示状态
        dialogShow: false,
        // 弹框的表单信息
        form: {
          // 默认状态在线
          status:0
        },
        // 弹框表单校验规则
        rules: {
        },
        // 上游公司筛选项列表
        upCompanyList: [],
        // 状态筛选项
        jumpTypeOption: [
          { label: "关闭", value: 0 },
          { label: "开启", value: 1 },
        ],
        // 状态筛选项
        isCheckOption: [
          { label: "关闭", value: 0 },
          { label: "开启", value: 1 },
        ],
        // 增加时间类型
        isZoneOption:[
          { label: "白天", value: 0 },
          { label: "夜间", value: 1 },
        ],
        // 状态筛选项
        statusOption: [
          { label: "在线", value: 0 },
          { label: "下线", value: 1 },
          { label: "停用", value: 2 },
        ],
        // 渠道产品筛选项列表
        upChannelList:[],
        // 管理人筛选项列表
        manageOptionList: [],
        // 计费模式筛选项
        feeTypeOption:[],
        // 采量模式筛选项
        pickTypeOption:[],
        // 分发渠道赛选项
        productIdOption:[],
        // 联登模式筛选项
        pickModeOption:[],
        // 表格列信息（用于控制显示与隐藏)
        columnsList:[],
        // 关联链接配置筛选项
        pickConfigIdOption:[],

        // 临时状态变量
        tempStatus:null,
        // 上下线当前激活项行数据
        rowIndex:null,
        // 上下线状态
        upAndDownLinesStates:null,

        // 通过率设置当前激活项行数据
        passRatioIndex:null,
        // 最低通过率
        passRatio:null



      };
    },
    mixins: [tableStickyMixins],
    watch: {
      columns: {
        handler() {
          // 清空popover激活项索引
          this.rowIndex = null
          this.updateTableHeight();
        },
        deep: true,
      },
      dataList:{
        handler() {
          // 清空popover激活项索引
          this.rowIndex = null
          this.passRatioIndex = null;
        },
        deep: true,
      },
    },
    created() {
      this.init();
      this.getUpCompanyList()
      this.getChannelList()
      this.getManageList()
      this.getRelatedType()
      this.getPickMode()
      this.getpickConfigIdList()
    },
    computed: {
      ...mapGetters(["sidebar", "device"]),
      // 计算当前列元素在所处环境的宽度
      getColumnWidth() {
        return (index) => {
          return this.isMobile
            ? this.columns[index].mobileWidth
            : this?.sidebar?.opened
            ? this.columns[index].pcWidth - this.slightWidth
            : this.columns[index].pcWidth + 17;
        };
      },
  
      // (是否处于查看操作禁用表单项)
      viewsOptionState() {
        return this.title === "查看采量";
      },
      // 对状态进行处理
      statusColor:()=>{
          return (state)=>{
             switch(state){
               case 0:
                  return 'success';
               case 1:
                  return 'info';
               case 2:
                  return 'danger';
               default:
             }
          }
       },
       // 将数组转换为对象形式
       ArrayFormatObj:()=>{
           return (arr)=>{
             return arr.reduce((pre, cur)=>{
               pre[cur.value] = cur.label;
               return pre;
             },{})
           }
        },
       // 表格列信息计算属性
       columns(){
         const arr = [
          {label: `ID`,prop: "id",visible: true,pcWidth: 150,mobileWidth: 100,fixed: this.device === 'mobile'? null: 'left',showTooltip: true,},
          {label: `上游公司名称`,prop: "companyName",visible: true,pcWidth: 130,mobileWidth: 110,fixed:this.device === 'mobile'? null: 'left',showTooltip: true,},
          {label: `产品简称`,prop: "simpleName",visible: true,pcWidth: 100,mobileWidth: 100,fixed: this.device === 'mobile'? null: 'left',showTooltip: true,},
          {label: `产品名称`,prop: "productName",visible: true,pcWidth: 120,mobileWidth: 100,fixed: this.device === 'mobile'? null: 'left',showTooltip: true,},
          
          {label: `采量模式`,prop: "pickTypeStr",visible: true,pcWidth: 130,mobileWidth: 120,fixed: null,showTooltip: true,},
          {label: `计费模式`,prop: "feeTypeStr",visible: true,pcWidth: 100,mobileWidth: 110,fixed: null,showTooltip: true,},
          {label: `单价`,prop: "priceMoney",visible: true,pcWidth: 100,mobileWidth: 110,fixed: null,showTooltip: false,sortable: true,},
          {label: `最低通过率`,prop: "passRatio",visible: true,pcWidth: 120,mobileWidth: 110,fixed: null,showTooltip: false,sortable: true,},

          {label: `开始时间`,prop: "startTime",visible: true,pcWidth: 100,mobileWidth: 100,fixed: null,showTooltip: true,sortable: true,},
          {label: `结束时间`,prop: "endTime",visible: true,pcWidth: 100,mobileWidth: 100,fixed: null,showTooltip: true,sortable: true,},
          {label: `跳转模式`,prop: "jumpType",visible: true,pcWidth: 120,mobileWidth: 100,fixed: null,showTooltip: true,},
          {label: `自撞模式`,prop: "isCheck",visible: true,pcWidth: 120,mobileWidth: 100,fixed: null,showTooltip: true,},
          
          {label: `屏蔽城市`,prop: "isShield",visible: true,pcWidth: 120,mobileWidth: 100,fixed: null,showTooltip: true,},
          {label: `企微跳转`,prop: "isWeChat",visible: true,pcWidth: 120,mobileWidth: 100,fixed: null,showTooltip: true,},
          {label: `贷超跳转`,prop: "isAdvert",visible: true,pcWidth: 120,mobileWidth: 100,fixed: null,showTooltip: true,},
          
          {label: `在线状态`,prop: "status",visible: true,pcWidth: 120,mobileWidth: 100,fixed: null,showTooltip: true,},
          {label: `每日限量`,prop: "orderNum",visible: true,pcWidth: 120,mobileWidth: 100,fixed: null,showTooltip: true,sortable: true,},
          {label: `配置链接`,prop: "pickUrl",visible: true,pcWidth: 180,mobileWidth: 100,fixed: null,showTooltip: true,},
         
          {label: `创建时间`,prop: "createTime",visible: true,pcWidth: 180,mobileWidth: 100,fixed: null,showTooltip: true,sortable: true,},
          {label: `最后修改时间`,prop: "updateTime",visible: true,pcWidth: 180,mobileWidth: 100,fixed: null,showTooltip: true,sortable: true,},
          {label: `管理员`,prop: "manageUserName",visible: true,pcWidth: 160,mobileWidth: 100,fixed: null,showTooltip: true,},
          {label: `操作`,prop: "operation",visible: true,pcWidth: 120,mobileWidth: 105,fixed: "right",showTooltip: true,},
        ]
        this.$set(this,'columnsList',arr)
        return arr;
       }
    },
    methods: {
      // 采量模式修改回调
      pickTypeChange(value){
         if(![0,1].includes(value)){
            this.$set(this.form,'outAesKey',null)
            this.$set(this.form,'outAesIv',null)
            this.$set(this.form,'outPrivateKey',null)
            this.$set(this.form,'outPublicKey',null)
         }
      },
      /** 复制代码成功 */
      clipboardSuccess(text) {
        this.$modal.msgSuccess("复制成功,请粘贴使用");
      },
      // 关联链接配置改变后的回调
      changepickConfigId(pickConfigId){
        let query = {
          id:this.form?.id,
          pickConfigId
        }
        getPickUrlById(query).then(res=>{
          this.$set(this,'form',{
            ...JSON.parse(JSON.stringify(this.form)),
            ...res?.data
          })
        })
      },
      // 获取关联链接配置列表
      getpickConfigIdList(){
        queryUpPickUrlConfigList().then(res=>{
          if(res.code == 200){
            this.pickConfigIdOption = res.data;
          }
        })
      },
      // 获取上游公司管理
      getUpCompanyList() {
        getUpCompanyList().then((res) => {
           this.upCompanyList = res.data;
        });
      },
      // 获取渠道筛选项列表
      getChannelList(){
         // 获取上游渠道列表
         getUpChannelList().then((res) => {
           this.upChannelList = res.data;
         });
      },
      // 获取管理人列表
      getManageList() {
         querySysUserManageList().then((res) => {
           this.manageOptionList = res?.data;
         });
      },
      // 获取相关模式
      getRelatedType() {
          getFeeType().then((res) => {
            this.feeTypeOption = res?.data;
          });
          getPickType().then((res) => {
            this.pickTypeOption = res?.data;
          });
      },
      // 获取分发渠道
      getProductId(){
          getProductByCompanyId({companyId:this.form?.companyId}).then(res=>{
            this.productIdOption = res?.data
          })
      },
      // 获取联登模式
      getPickMode() {
          getPickMode().then((res)=>{
            this.pickModeOption = res?.data
          })
      },
      // 显示上下线弹出窗回调
      showOrOffPopo(row) {
         // 设置上下线状态
         this.upAndDownLinesStates = row?.status
         // 设置索引打开弹窗
         this.rowIndex = row?.id
         // 设置临时变量
         this.tempStatus = row?.status;       
      },
      // 点击提交修改上下线状态
      clickSubmitOnOrOff(row) {
          const params = {
            id: row?.id,
            status:this.upAndDownLinesStates,
          };
          if(this.upAndDownLinesStates===this.tempStatus){
            return this.$message.error(`采量已${this.ArrayFormatObj(this?.statusOption)[row?.status]},请勿重复操作！`);
          }
          onOrOff(params).then((res) => {
            if(res.code === 200){
              this.$message.success("操作成功");
              this.getList();
              this.rowIndex = null;
            }
          });
       },
      // 点击取消修改上下线状态
      clickCancelOnOrOff(row){
          row.status = this.tempStatus
          this.$message.info("取消操作");
          this.rowIndex = null;
      },
      // 显示最低通过率设置
      showPassRatio(row) {
         // 回显设置最低通过率
         console.log(row.passRatio.split('.'));
         let sqlitArr = row.passRatio.split('.')
         this.passRatio = sqlitArr?.length >1 ? sqlitArr[0] : 0
         // 设置索引打开弹窗
         this.passRatioIndex = row?.id
      },
      // 点击最低通过率设置
      clickPassRatio(row){
        let params = {
              id:row?.id,
              passRatio:this?.passRatio
        }
        updatePassRatio(params).then((res) => {
            if(res.code === 200){
              this.$message.success("操作成功");
              this.getList();
              this.passRatioIndex = null;
            }
        });
      },
      // 点击最低通过率设置
      clickCancelPassRatio(row){
          this.$message.info("取消操作");
          this.passRatioIndex = null;
          this.passRatio = 0
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.$set(this.queryParams, "pageIndex", 1);
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        // 完全重置到初始状态
        this.$set(this, "queryParams", {
          pageIndex: 1,
          pageSize: 10,
        });
        // 重置时间范围
        this.$set(this, "dateRange", []);
        this.init();
      },
      init() {
        this.getList();
      },
      // 转模式单独状态切换
      changeJumpType(row) {
        const params = {
          id: row?.id,
          jumpType: row?.jumpType ? 0 : 1,
        };
        updateJumpType(params).then((res) => {
          if (res.code === 200) {
            this.$message.success("操作成功");
            this.getList();
          }
        });
      },
      // 自撞模式切换
      changeIsCheck(row) {
        const params = {
          id: row?.id,
          isCheck: row?.isCheck ? 0 : 1,
        };
        updateIsCheck(params).then((res) => {
          if (res.code === 200) {
            this.$message.success("操作成功");
            this.getList();
          }
        });
      },
      // 屏蔽城市切换
      changeIsShield(row) {
        const params = {
          id: row?.id,
          jumpType: row?.isShield ? 0 : 1,
        };
        updateCityToShield(params).then((res) => {
          if (res.code === 200) {
            this.$message.success("操作成功");
            this.getList();
          }
        });
      },
      // 企微跳转切换
      changeIsWeChat(row) {
        const params = {
          id: row?.id,
          jumpType: row?.isWeChat ? 0 : 1,
        };
        updateToWeChat(params).then((res) => {
          if (res.code === 200) {
            this.$message.success("操作成功");
            this.getList();
          }
        });
      },
      // 贷超跳转切换
      changeIsAdvert(row) {
        const params = {
          id: row?.id,
          jumpType: row?.isAdvert ? 0 : 1,
        };
        updateToAdvert(params).then((res) => {
          if (res.code === 200) {
            this.$message.success("操作成功");
            this.getList();
          }
        });
      },
      /** 查询列表 */
      getList() {
        this.loading = true;
        if (this.dateRange?.length) {
          this.queryParams.createTimeStart = this.dateRange[0];
          this.queryParams.createTimeEnd = this.dateRange[1];
        } else {
          delete this.queryParams.createTimeStart;
          delete this.queryParams.createTimeEnd;
        }
        queryPickByPage(this.queryParams).then((response) => {
          // 解决id为number类型精度丢失问题
          this.dataList = response?.data?.list.map((row) => {
            return {
              ...row,
              id: row.id.toString(),
            };
          });
          this.total = response?.data?.total;
          this.loading = false;
        }).catch((err) => {
          setTimeout(() => {// 延迟2s后自动取消加载状态
            this.loading = false;
          }, 2000);
        })
      },
      // 获取详情
      getUpPickDetail(row) {
        queryById(row.id).then((response) => {
          this.form = response.data;
          // 采量时间映射处理
          if (response.data.startTime && response.data.endTime) {
            const startTime = new Date();
            const endTime = new Date();
            startTime.setHours(...response.data.startTime.split(':').map(Number));
            endTime.setHours(...response.data.endTime.split(':').map(Number));

            // 设置 开始事件和结算时间
            this.$set(this.form, 'startTime', startTime);
            this.$set(this.form, 'endTime', endTime);
          }
          // 单独处理一下动态获取链接回显
          this.changepickConfigId(response.data?.pickConfigId)
          // 获取采量分发渠道
          this.getProductId()
        });
      },
      // 修改表格高度触发回调
      updateTableHeight() {
        this.$nextTick(() => {
          this.$refs.table.doLayout();
        });
      },
      // 处理对话框
      handelDialog(title, row = null) {
        this.title = title + "采量";
        switch (title) {
          case "查看":
            // 获取采量详细信息回显数据
            this.getUpPickDetail(row);
            break;
          case "添加":
            break;
          case "编辑":
            // 获取公司详细信息回显数据
            this.getUpPickDetail(row);
            break;
          case "省市评分":
            // 跳转到省市评分页面
            this.$router.push({
              path:'/globalConfig/pickCity',
              query:{
                upProductId:row?.id,
              }
            })
            return;
          case "资质评分":
            // 跳转到资质评分页面
            this.$router.push({
              path:'/globalConfig/pickFlair',
              query:{
                upProductId:row?.id,
              }
            })
            return;
          default:
          // 其他操作
        }
        this.dialogShow = true;
      },
      /*关闭弹窗*/
      handleClose() {
        this.$refs["formRef"].resetFields();
        this.form = this.$options.data().form;
        // 清空采量时间
        this.$set(this,'pickDateRange',null)
        this.dialogShow = false;
      },
      // 取消删除
      hanCancelDel() {
        this.$message({
          type: "info",
          message: "已取消删除操作",
        });
      },
      // 删除列表项
      handelDel(row) {
        deleteById(row?.id).then((res) => {
          if (res.code === 200) {
            this.$message.success("删除成功");
            this.getList();
          }
        });
      },
      // 刷新数据且关闭弹框
      handleRefresh() {
        // 刷新数据
        this.getList();
        // 关闭弹窗
        this.handleClose();
      },
      /*提交操作*/
      handleSubmit(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let params = {};
            params = JSON.parse(JSON.stringify(this.form));
            if(!this?.form?.startTime){
              return this.$message.error("请选择开始时间");
            }
            if(!this?.form?.endTime){
              return this.$message.error("请选择结束时间");
            }
            // 采量时间范围处理
            params.startTime = moment(this?.form?.startTime).format("HH:mm");
            params.endTime = moment(this?.form?.endTime).format("HH:mm");
            // console.log(params,this.pickDateRange);
            // 判断当前所处操作
            switch (this.title) {
              case "添加采量":
                // 添加操作
                console.log("添加", params);
                addOrEdit(params).then((res) => {
                  if (res.code === 200) {
                    this.$message.success("添加成功");
                    this.handleRefresh();
                  }
                });
                break;
              case "编辑采量":
                // 编辑操作
                console.log("编辑", params);
                addOrEdit(params).then((res) => {
                  if (res.code === 200) {
                    this.$message.success("编辑成功");
                    this.handleRefresh();
                  }
                });
                break;
              default:
              // 其他操作
            }
          }
        });
      },
    },
  };
  </script>
  
  <style scoped lang="scss">
  .title {
    font-size: 20px;
    color: #333333;
    font-weight: 500;
  }
  .search-box {
    margin: 0 0 20px;
    padding: 20px 20px 0;
    background: #fff;
    align-items: flex-start;
    border-radius: 6px;
  }
  .search-area {
    position: absolute;
    right: 20px;
  }
  .el-form-item__content {
    flex: 1;
    line-height: 40px;
    position: relative;
    font-size: 14px;
    min-width: 0;
  }
  ::v-deep .el-dialog__body {
    border-top: 1px solid #dfe6ec;
    border-bottom: 1px solid #dfe6ec;
  }
  .el-table {
    // 滚动条加粗
    --scrollbar-height: 9px;
  }
  </style>
  